<template>
  <div>
    <div
      class="web-container"
      v-for="item in components"
      :key="item.uuid"
      :data-uuid="item.uuid"
      @click="(event) => $emit('componentClick', event, item)"
    >
      <div
        v-if="
          item.componentConfig
        "
        :class="{'fixed-element': item.componentConfig.layout.fixed}"
        :style="{
         [item.componentConfig.layout.fixed ? 'top' : 'marginTop']: item.componentConfig.layout.fixed
          ? item.componentConfig.layout.marginTop ? item.componentConfig.layout.marginTop + 'px' : 'unset'
          : item.componentConfig.layout.marginTop + 'px',
         [item.componentConfig.layout.fixed ? 'bottom' : 'marginBottom']: item.componentConfig.layout.fixed
          ? item.componentConfig.layout.marginBottom ? item.componentConfig.layout.marginBottom + 'px' : 'unset'
          : item.componentConfig.layout.marginBottom + 'px'
         }"
      >
        <component
          class="component"
          :is="item.componentConfig.id"
          :props="item.componentConfig.props"
        />
      </div>
      <div v-else>
        无法识别的组件 {{ item.componentConfig && item.componentConfig.id }}
      </div>
    </div>
  </div>
</template>

<script>
import components from "./wrapper";

export default {
  name: "web-container",
  props: ["components"],
  components: {
    ...components
  },
  computed: {
  },
  methods: {
  },
};
</script>

<style scoped>
.component:hover {
  outline: 1px dashed #2a87e6;
}

.fixed-element {
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}
</style>